import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './LanguageButton.module.css';

const LanguageButton: React.FC = () => {
  const { i18n, t } = useTranslation();
  const currentLang = i18n.language || 'zh';
  
  useEffect(() => {
    localStorage.setItem('language', currentLang);
  }, [currentLang]);
  
  const toggleLanguage = () => {
    const newLang = currentLang === 'zh' ? 'en' : 'zh';
    i18n.changeLanguage(newLang);
  };

  return (
    <button
      onClick={toggleLanguage}
      className={styles.languageButton}
      title={currentLang === 'zh' ? t('common:switchToEnglish') : t('common:switchToChinese')}
    >
      {currentLang === 'zh' ? 'English' : '中文'}
    </button>
  );
};

export default LanguageButton;
